<template>
  <div class="bg_write">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-col>
    </el-row>
    <el-row class="pd_20">
      <el-col :span="12" style="margin-top:20px">
        <!-- <compressimgUpload class="uploadIsXuan f_r is_mar" :isGzip="false" listType="text" :isCropper="false" :onSuccess="onSuccess2" :isOneImg="true"
            :files="fileList2"></compressimgUpload> -->

        <el-dialog :visible.sync="dialogVisible" :append-to-body="true" width="400px" height="400px">
          <img width="100%" :src="$fnc.getImgUrl(form.qr_code_bj)" alt="" />
        </el-dialog>
        <el-input placeholder="请输入二维码头部背景" v-model="form.qr_code_bj" @blur="inputBlur('qr_code_bj', form.qr_code_bj)" style="margin-bottom:15px">
          <template slot="prepend">头部背景：</template>
          <template slot="append">
            <compressimgUpload class="uploadIsXuan f_r is_mar" :isGzip="false" listType="text" :isCropper="false" :onSuccess="onSuccess"
                :isOneImg="true" :files="fileList2"></compressimgUpload>
          </template>
          <template slot="suffix">
            <el-button :loading="$store.state.isLoading" type="success" size="small " class="f_r is_mar" :disabled="form.qr_code_bj == ''"
                @click="dialogVisible = true">
              查看
            </el-button>
          </template>
        </el-input>

        <el-input placeholder="请输入二维码头部文字" v-model="form.qr_code_text" @blur="inputBlur('qr_code_text', form.qr_code_text)">
          <template slot="prepend">头部文字：</template>
        </el-input>
      </el-col>
      <el-col :span="24" class="tc" style="padding-bottom:80px">
        <div id="diy-phone" class="mgt50 tr" v-for="(item, i) in fileList" :key="i" style="margin-right:30px;margin-bottom: 0px;">
          <div v-loading="loadImg" v-if="loadImg && i == index" class="mode" element-loading-background="rgba(0, 0, 0, 0.8)"></div>
          <i v-if="item !== 'default'" class="el-icon-close close_img" title="删除" @click="delimg(i)"></i>
          <div class="diy-phone-header">
            <i class="diy-phone-receiver"></i>
            <div class="diy-phone-title j-pagetitle"></div>
          </div>
          <div id="j-materialPrev" class="diy-phone-contain">
            <dl class="materialPrePanel tl" style="width:100%">
              <div class="poster_con" @click="up_btn(item, i)" :style="{
                  backgroundImage: 'url(' + $fnc.getImgUrl(item.piclink) + ')'
                }">
                <img src alt />
              </div>
              <div class="footer_pos"></div>
            </dl>
          </div>
          <div class="qr_sort">
            <el-input v-model="item.sort" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </el-col>
    </el-row>
    <uploadpic ref="uppic" :index="index" :is_tip="false" :width="200" :is_more="false" @send_pic="upload_pic"></uploadpic>

    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button :loading="$store.state.isLoading" @click="addInfo" @keydown.13="addInfo">保存</el-button>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import uploadpic from "@/components/page/pic/up_pic";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
export default {
  components: {
    HeadTitle,
    uploadpic,
    compressimgUpload
  },
  data () {
    return {
      dialogVisible: false,
      fileList2: [],
      form: {
        qr_code_bj: "",
        qr_code_text: ""
      },
      sel_index: null,
      loadImg: false,
      fileList: [{ piclink: "", sort: 1 }],
      index: 0,
    };
  },
  methods: {
    inputBlur (iden, val) {
      var params = {};
      params.iden = iden;
      params.value = val;
      params[iden] = val;
      this.$api.getSettings.updateSetting(params).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功！");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    onSuccess (pic) {
      this.form.qr_code_bj = pic;
      this.inputBlur("qr_code_bj", this.form.qr_code_bj);
    },
    upload_pic (pic) {
      if (!this.sel_index) {
        this.sel_index = 0;
        this.$set(this, "sel_index", 0);
        this.fileList = [{ piclink: "", sort: 1 }];
      }
      this.$set(this.fileList[this.sel_index], "piclink", pic);
      var obj = {};
      obj.piclink = "";
      obj.sort = 1;
      this.fileList.push(obj);
      // this.fileList[this.sel_index].piclink = pic;
    },
    up_btn (item, k) {
      this.sel_index = k;
      this.$refs.uppic.open_uppic();
    },
    befau (i) {
      this.index = i;
      this.loadImg = true;
    },

    addInfo () {
      var params = {};
      params.cate = "ewm_bg";
      params.ar = this.fileList.filter(item => item.piclink != "");
      params.ar = JSON.stringify(params.ar);
      this.$api.getAdmin.setQrImg(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    qrList () {
      this.$api.getAdmin.getQrList({ cate: "ewm_bg" }).then(res => {
        if (res.data.code == 200) {
          this.fileList = res.data.result;
          var obj = {};
          obj.piclink = "";
          obj.sort = 1;
          this.fileList.push(obj);
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    delimg (index) {
      this.fileList.splice(index, 1);
    },
    getconfig () {
      this.$api.getSettings.getSettingsList({ cate: "qr" }).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          res.data.result.forEach(item => {
            if (item.iden == "qr_code_bj") {
              this.form.qr_code_bj = item.value;
            } else if (item.iden == "qr_code_text") {
              this.form.qr_code_text = item.value;
            }
          });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    }
  },
  mounted () {
    this.qrList();
    this.getconfig();
  }
};
</script>
<style scoped>
.qr_sort {
  width: 50%;
  margin: 10px auto;
}
.footer_pos {
  background-size: 100% 100%;
}
</style>
